<template>
  <div>
    <myTable :arr="dateList">
      <template #t_header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <template v-slot:t_body="{listDate:item,indd:index}">
        <td>{{item.id}}</td>
        <td>{{item.goods_name}}</td>
        <td>{{item.goods_price}}</td>
        <td>
          <input
            v-focus
            ref="inPut"
            @blur="onBlur(item)"
            @keyup.enter="onEnter(item)"
            @keyup.esc="item.inputValue = ''"
            type="text"
            v-if="item.inputVisible"
            v-model="item.inputValue"
          />
          <button class="btn btn-primary btn-sm add-tag" v-else @click="addTag(item)">添加</button>
          <span class="badge badge-warning" v-for="(item,index) in item.tags" :key="index">{{item}}</span>
        </td>
        <td>
          <button class="btn bun-danger btn-sm" @click="onDelet(index)">删除</button>
        </td>
      </template>
    </myTable>
  </div>
</template>
<script>
import myTable from "../components/myTable";
export default {
  components: {
    myTable
  },
  data() {
    return {
      dateList: []
    };
  },
  methods: {
    onDelet(e) {
      this.dateList.splice(e, 1);
    },
    addTag(e) {
      e.inputVisible = true;
      // this.$refs("inPut").focus();
    },
    onBlur(v) {
      console.log(v);
      v.inputVisible = false;
    },
    onEnter(v) {
      if (v.inputValue.trim().length > 0) {
        v.tags.push(v.inputValue);
        v.inputValue = "";
      } else {
        alert("滚回去重写");
      }
    }
  },
  directives: {
    focus: {
      inserted(dom) {
        // console.log(dom);
        dom.focus();
      }
    }
  },
  async created() {
    let { data } = await this.$({
      url: "/api/goods"
    });

    if (data.status == 0) {
      this.dateList = data.data;
    }
    console.log(this.dateList);
  },
  mounted() {}
};
</script>

<style scoped>
</style>